<accordion>
  <accordion-group heading="Static Header, initially expanded">
    This content is straight in the template.
  </accordion-group>
  <accordion-group #group>
    <div accordion-heading>
      I can have markup, too!
      <i class="pull-right float-xs-right glyphicon"
         [ngClass]="{'glyphicon-chevron-down': group?.isOpen, 'glyphicon-chevron-right': !group?.isOpen}"></i>
    </div>
    This is just some content to illustrate fancy headings.
  </accordion-group>
  <accordion-group heading="Content 1">
    <p>Content 1</p>
  </accordion-group>
  <accordion-group heading="Content 2">
    <p>Content 2</p>
  </accordion-group>
</accordion>

<alert type="success">
  <strong>Well done!</strong> You successfully read this important alert message.
</alert>
<alert type="info">
  <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</alert>
<alert type="warning">
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</alert>
<alert type="danger">
  <strong>Oh snap!</strong> Change a few things up and try submitting again.
</alert>
